<template>
	<view class="wrap">
		<u-form :model="form" :rules="rules" :error-type="errorType" ref="uForm">
			<u-form-item label="联系姓名" label-width="140" prop="name"  required><u-input v-model="form.name" placeholder="请输入联系姓名" /></u-form-item>
			<u-form-item label="联系电话" label-width="140" prop="phone" required><u-input v-model="form.phone" placeholder="请输入联系电话" /></u-form-item>
			<u-form-item label="选择城市" label-width="140" prop="area" required><input disabled type="text" v-model="form.area" placeholder-class="line" placeholder="请选择城市"  @tap="showRegionPicker"/></u-form-item>

			<u-form-item label="详细地址" label-width="140" prop="address" required><u-input :type="textarea"  style="width: 90% !important;" v-model="form.address" placeholder="请输入详细地址" /></u-form-item>
			<u-form-item label="是否默认" label-width="140" prop="is_default"><u-switch v-model="form.is_default"></u-switch></u-form-item>
			<view class="tips small">提醒：每次下单会默认使用该地址</view>
			<u-picker mode="region" ref="uPicker" :default-region="defalutRegion" v-model="show" @confirm="confirm" />
			
		</u-form>
		<u-button class="u-m-40 u-p-40" type="primary" @click="submit">保存</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defalutRegion: [],// 默认地址
				addressId: 0,// 地址id
				show: false, // picker是否展示
				// area: '', // 地址选择后的结果
				// name: '', // 收货人姓名
				// phone: '', //收货手机号
				// province: '', //省
				// city: '', //市
				// county: '', // 区县
				// address: '', // 详细地址
				// is_default: false, // 是否是默认地址
				
				errorType:['message'],
				textarea: 'textarea',
				form: {
					name: '',// 收货人姓名
					phone:'',//收货手机号
					area:'',//级联城市选择
					address:'', //详细地址
					is_default:false, //是否是默认地址
					province: '', //省
					city: '', //市
					county: '', // 区县
				},
				rules: {
					name: [
						{
							required: true,
							message: '请输入联系姓名',
							trigger: 'blur' ,
						},
						{
							min: 3,
							max: 5,
							message: '姓名长度在3到5个字符',
							trigger: ['change','blur'],
						},
						{
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.chinese(value);
							},
							message: '姓名必须为中文',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change','blur'],
						},
					],
					phone: [
						{
							required: true, 
							message: '请输入联系电话',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					area: [
						{
							required: true,
							message: '请选择地区',
							trigger: 'change',
						}
					],
					address: [
						{
							required: true,
							message: '请输入详细地址'
						},
						{
							min: 5,
							message: '详细地址不能少于5个字',
							trigger: 'change' ,
						}
					]
				},
			};
		},
		onLoad(options) {
			this.addressId = options.addressId ;
			if(options.addressId !== '0'){
				this.getAddressDetail(options.addressId)
			}
		},
		methods: {
			// 获取地址详情
			async getAddressDetail(id){
				const res = await this.$u.api.addressDetail(id)
				// console.log(res)
				this.form.name = res.name
				this.form.phone = res.phone
				this.form.province = res.province
				this.form.county = res.county
				this.form.area = `${res.province}-${res.county}-${res.city}`
				this.form.city = res.city
				this.form.address = res.address
				this.form.is_default = res.is_default === 1 ? true : false
				this.defalutRegion.push(res.province)
				this.defalutRegion.push(res.city)
				this.defalutRegion.push(res.county)
			},
			showRegionPicker() {
				this.show = true;
			},
			// 获取省市区
			confirm(res) {
				// console.log(res)
				// 省 市 区
				this.form.province = res.province.label
				this.form.city = res.city.label
				this.form.county = res.area.label
				this.form.area = `${this.form.province}-${this.form.city}-${this.form.county}`
			},
			// 表单提交
			submit(){
				this.$refs.uForm.validate(async (valid) => {
					if (valid) {
						// 新增地址
						this.form.is_default = this.form.is_default === true ? 1 : 0 ;
						this.form.area = undefined ;
						// console.log(this.form);
						if(this.addressId < 1){
							 await this.$u.api.addressAdd(this.form);
							this.$u.toast('地址添加成功');
						}else{
							 await this.$u.api.addressUpdate(this.addressId,this.form)
							this.$u.toast('修改地址成功');
						}
						setTimeout(() => {
							this.$u.route('pages/center/address')
						},1500)
					} else {

					}
				});
			},
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
	};
</script>

<style lang="scss" scoped>
	/deep/ .line {
		color: $u-light-color;
		font-size: 28rpx;
	}

	.wrap {
		padding: 0 40rpx;
		.top {
			background-color: #ffffff;
			border-top: solid 2rpx $u-border-color;
			padding: 22rpx;

			.item {
				display: flex;
				font-size: 32rpx;
				line-height: 100rpx;
				align-items: center;
				border-bottom: solid 2rpx $u-border-color;

				.left {
					width: 180rpx;
				}

				input {
					text-align: left;
					width: 90%;
				}
			}

			.address {
				padding: 20rpx 0;

				textarea {
					width: 90%;
					height: 150rpx;
					background-color: #f7f7f7;
					line-height: 60rpx;
					margin: 40rpx auto;
					padding: 20rpx;
				}
			}

			.site-clipboard {
				padding-right: 40rpx;

				textarea {
					// width: 100%;
					height: 150rpx;
					background-color: #f7f7f7;
					line-height: 60rpx;
					margin: 40rpx auto;
					padding: 20rpx;
				}

				.clipboard {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					color: $u-tips-color;
					height: 80rpx;

					.icon {
						margin-top: 6rpx;
						margin-left: 10rpx;
					}
				}
			}
		}

		.bottom {
			// margin-top: 20rpx;
			padding: 40rpx;
			padding-right: 0;
			background-color: #ffffff;
			font-size: 28rpx;

			

			.default {
				
				display: flex;
				justify-content: space-between;
				border-bottom: solid 2rpx $u-border-color;
				line-height: 64rpx;

				.tips {
					font-size: 24rpx;
				}

				.right {}
			}
		}
	}
</style>
